<template>
  <view class="search-page">
    <!-- 头部 -->
    <view class="header">
		<view class="search-bar">
			<image src="/static/icon/searchIcon.png" mode="" class="search-bar-icon"></image>
			<input type="text" placeholder="请搜索您想购买的商品" v-model="searchKey" @confirm="handleSearch" placeholder-class="search-bar-placeholder"/>
			<button @click="handleSearch">搜索</button>
		</view>
		<view class="filter-bar">
			<text @click="setSort('综合')">综合</text>
			<text @click="setSort('上新')">上新</text>
			<text @click="setSort('销量')">销量</text>
			<text @click="setSort('价格')">价格</text>
		</view>
    </view>

    <!-- 商品列表 -->
    <scroll-view 
      scroll-y 
      class="goods-list"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="goods-grid">
        <view 
          class="goods-item" 
          v-for="item in sortedDecalsList" 
          :key="item.id"
        >
          <image :src="item.image" mode="aspectFill" />
          <view class="goods-info">
            <view class="goods-name">{{ item.name }}</view>
            <view class="price-row">
              <text class="price">¥{{ item.price }}</text>
              <text class="sold">已售{{ item.num }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      sortType: '综合',
      decalsList: [],
      page: 1,
      isLoading: false,
      isRefreshing: false
    }
  },
  computed: {
    sortedDecalsList() {
      let sortedList = [...this.decalsList];
      if (this.sortType === '销量') {
        sortedList.sort((a, b) => b.num - a.num);
      } else if (this.sortType === '价格') {
        sortedList.sort((a, b) => b.price - a.price);
      }
      return sortedList;
    }
  },
  methods: {
    async loadDecals() {
      if (this.isLoading) return;
      this.isLoading = true;
      
      try {
        // 模拟API调用
        const mockData = Array(10).fill().map((_, index) => ({
          id: this.page * 10 + index,
          name: '悦真西游记创意墨贴纸贴纸',
          price: 0.9,
          image: '/static/demo/decals.jpg',
          num: Math.floor(Math.random() * 1000)
        }));
        
        this.decalsList = [...this.decalsList, ...mockData];
        this.page++;
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },
    loadMore() {
      this.loadDecals();
    },
    async onRefresh() {
      this.isRefreshing = true;
      this.page = 1;
      this.decalsList = [];
      await this.loadDecals();
      this.isRefreshing = false;
    },
    handleSearch() {
      this.page = 1;
      this.decalsList = [];
      this.loadDecals();
    },
    setSort(type) {
      this.sortType = type;
    }
  },
  mounted() {
    this.loadDecals();
  }
}
</script>

<style lang="scss">
.search-page {
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background-color: #fff;
  padding: 10rpx 20rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  height: 64rpx;
  background: rgba(239,239,239,1);
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  padding-left: 16rpx;
  width: 100%;
  box-sizing: border-box;
  .search-bar-placeholder{
	  text-align: center;
	  color: rgba(0,0,0,0.4);
  }
  .search-bar-icon{
	  width: 48rpx;
	  height: 48rpx;
  }
  input {
    flex: 1;
    height: 60rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
    margin-right: 10rpx;
	font-size: 24rpx;
  }
  button {
    height: 56rpx;
    padding: 0 24rpx;
    border-radius: 30rpx;
    background-color: #007aff;
    color: #fff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
}

.filter-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90rpx;
  width: 100%;
  text {
    font-size: 28rpx;
    color: #333;
  }
}

.goods-list {
	width: 100%;
	height: calc(100vh - 160rpx); // 头部的总高度
	padding: 20rpx;
	box-sizing: border-box;
}

.goods-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods-item {
  width: 48%;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  image {
    width: 332rpx;
    height: 332rpx;
  }
  .goods-info {
    padding: 12rpx;
    .goods-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        font-size: 32rpx;
        color: #ff6b6b;
        font-weight: bold;
      }
      .sold {
        font-size: 20rpx;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>